<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/mi-bass.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
    <div class="header">
        <dir class="mi">
        </dir>
        <p class="title">小米商城</p>
        <p>让每个人都能享受科技的乐趣</p>
    </div>
    <div class="content">
        <!-- <img src="images/banner.png" alt=""> -->
        <div class="form">
            <div class="nav">
                 <p class="login">
                    <span class="active tp">账号登录</span>
                    <span style="color:#e0e0e0">|</span>
                    <span class="saoma  tp">扫码登录</span>
                </p>
            </div>
            <div class="tab-content">
                <div class="denglu">
                    <p class="phone">
                    <input type="text" placeholder="邮箱/手机号/小米账号"/>
                </p>
                <p class="password">
                    <input type="password" placeholder="密码"/>
                </p>
                <p class="submit">
                    <input type="submit" value="登录"/>
                </p>
            <!-- </form> -->
               <p class="register">
                    <span>注册小米账号</span>
                    <span>|</span>
                    <span>忘记密码?</span>
                </p>

                    <div class="footer">
                        <p class="qita">
                            <span class="left"></span>
                            其他方式登录
                            <span class="right"></span>
                        </p>
                        <div class="AllIcon">
                            <a href="#" ><span class="one"></span></a>
                            <a href="#"><span  class="two"></span></a>
                            <a href="#" ><span class="three"></span></a>
                            <a href="#" ><span class="four"></span></a>
                        </div>
                    </div>    

                </div>
                
               <div class="weixinma">
                <img src="images/sao.png" alt="">
               </div>
            </div>
            
            
        </div>
    </div>
    <div class="tail">
        <p class="tip">
            <a href="">简体</a>&nbsp;|
            <a href="">繁体</a>&nbsp;|
            <a href="">English</a>&nbsp;
            <a href="">常见问题</a>
        </p>
        <p>小米公司版权所有-京ICP备10046444-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;京公网安备11010802020134号-京ICP证110507号</p>
        <div class="jing">
            <img src="images/FireShot Capture 008 - 淘宝网 - 淘！我喜欢 - www.taobao.com.png">
        </div>
    </div>
    <script>
        var $lis = $(".login>.tp");
        for(var i=0;i<$lis.length;i++){
            $lis[i].index=i;
        }
        $lis.click(function(){
            $(this).addClass("active").siblings().removeClass("active");
            $(".tab-content").children().hide().eq(this.index).show();
        })
       
    </script>
</body>
</html>
